<template>
  <footer class="footer" v-show="list.length">
      <span class="todo-count"><strong>{{ sy }}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected:bbb==='all'}" @click="filterall('list')" href="#/">全部</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:bbb==='active'}" @click="filternow('list')">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:bbb==='completed'}" @click="filterType('list')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clear('list')" v-show="ishow">清除已完成</button>
    </footer>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  mounted(){console.log(this);},
  data() {
    return {
      sy: "",
      bbb:''
    }
  },
  model: {
    prop: 'aaa',
    event:'bbb'
  },
  watch: {
    list: {
      deep: true,
      immediate:true,
      handler() {
        this.sy = this.list.filter(x => !x.isDone).length
      }
    }
  },
  props:['list','type'],
  computed: {
    // sy() {
    //   return this.list.filter(x => !x.isDone).length
    // },
    ishow() {
      return  this.list.some(x => {
      return x.isDone
      })
    },
   
  },
  methods: {
    ...mapActions('list', ['clearlist','overlist','nowlist','getlist']),
    clear() {
      this.$store.dispatch('list/clearlist',this.list)
      
    },
    filterType() {
      
      this.overlist(this.list)
      
    },
    filternow() {
      
      this.nowlist(this.list)
      
      
    },
    filterall() {
      this.getlist(this.list)
    }
  }
}
</script>

<style>

</style>